<template>
  <div>
    <view class="downloadBanner">
      <image class="delete" src="../../static/icon/delete.png"></image>
      <image class="downloadBannerImg" src="../../static/image/downloadBanner.png"></image>
    </view>
    <!-- <view class="search">
      <image class="logo" src="../../static/image/logo.png"></image>
      <van-search value="" shape="round" background="#4fc08d" placeholder="请输入搜索关键词" class="van-search--small" />
    </view> -->
    <view class="indexContainer">
      <view class="header">
        <image class="logo" src="../../static/image/logo.png"></image>
        <view class="search">
          <text class="iconfont icon-sousuo"></text>
          <input type="text" placeholder="搜索..." placeholder-class="placeholder" />
        </view>
        <button>搜索</button>
      </view>
    </view>

    <!-- 导航栏 -->
    <scroll-view scroll-x enable-flex class="list">
      <div class="item" v-for="item in cateList" :key="item.id" @click="goDetail(item.id)">
        <div class="item1 {{ index == 0 ? 'active' : '' }}">{{ item.name }}</div>
      </div>
    </scroll-view>
    <div v-if="show == 'more'">

      <!-- 轮播图 -->
      <swiper circular autoplay indicator-dots class="swiper">
        <swiper-item v-for="item in focusList" :key="item.id">
          <image :src="item.picUrl" mode="widthFix"></image>
        </swiper-item>
      </swiper>
      <!-- 三个保障 -->
      <div class="baozhang">
        <div class="cont" v-for="item in policyDescList" :key="item.id">
          <image :src="item.icon"></image>{{ item.desc }}
        </div>
      </div>
      <!-- 分类 -->
      <div class="categoryItem">
        <div class="item flex_c" v-for="item in  kingKongModule" :key="item.id">
          <navigator :url="item.schemeUrl">
            <image class="img" :src="item.picUrl" mode="scaleToFill" />
          </navigator>
          <div class="title">{{ item.text }}</div>
        </div>
      </div>

      <!-- 类目热销推荐 -->
      <div class="goodsRanking">
        类目热销榜
      </div>
      <!-- 热销列表 -->
      <div class="hotItem">
        <div class="hotItemTop">
          <div class="hotItemTopLeft">
            <div class="hotItemTopLeftText">家庭清洁榜</div>
            <img class="hotItemTopimg" :src="categoryHotSellModule" alt="">
          </div>
          <div class="hotItemTopright">
            <div class="hotItemTopLeftText">床品榜</div>
            <img class="hotItemTopimg" :src="categoryHotSellModule1" alt="">
          </div>
        </div>
        <div class="hotItemBottom">
          <div class="hotItemBottomItem" v-for="(item, index) in categoryList" :key="index">
            <div class="hotItemBottomTitle">{{ item.categoryName }}</div>
            <div class="hotItemBottomImg">
              <img class="moreImg" :src="item.picUrl" alt="">
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 分类列表的组件 -->
    <div v-else class="global">
      <v-item :list="global" :type="categoryItemList" :typelist="currentCategory"></v-item>
    </div>
  </div>
  <div class="task" @click="task"></div>
</template>

<script setup lang = "ts" >
import Ajax from '../../api/index'
import { ref, onMounted } from 'vue'
import { onLoad, onReachBottom } from "@dcloudio/uni-app";

//轮播图数据
const focusList = ref<any>([])
//三个保障
const policyDescList = ref<any>([])
//分类数据
const kingKongModule = ref<any>([])
//今日特价数据
const indexActivityModule = ref<any>()
//热销榜
const categoryHotSellModule = ref<any>()
const categoryHotSellModule1 = ref<any>()
const categoryList = ref<any>()
const categoryItemList = ref()
const currentCategory = ref()
//推荐数据
const type = ref('bottom')
const cateList = ref<any>([])
const global = ref<any>()

//定义显示和隐藏组件
const show = ref<any>('more')
//页面一加载发送请求获取推荐数据
onLoad(() => {
  reqCateList()
  reqCateList1()
});
const reqCateList = async () => {
  let time = Date.now()
  let res = await Ajax.reqCategory(time)

  focusList.value = res.data.data.focusList
  policyDescList.value = res.data.data.policyDescList
  kingKongModule.value = res.data.data.kingKongModule.kingKongList
  indexActivityModule.value = res.data.data.indexActivityModule[0].picUrl
  categoryHotSellModule.value = res.data.data.categoryHotSellModule.categoryList[0].picUrl
  categoryHotSellModule1.value = res.data.data.categoryHotSellModule.categoryList[1].picUrl
  categoryList.value = res.data.data.categoryHotSellModule.categoryList.filter((a: any, b: any,) => {
    return b >= 2
  })
}

const reqCateList1 = async () => {
  let time = Date.now()
  let res = await Ajax.reqItem(time)
  cateList.value = res.global.cateList
  let arr1 = { id: 1111, name: "推荐" }
  cateList.value.unshift(arr1)
}

const goDetail = async (id: any) => {
  let time = Date.now()
  let res = await Ajax.reqCateitem(time, id)
  global.value = res.data
  categoryItemList.value = res.data.categoryItemList
  currentCategory.value = res.data.currentCategory
  show.value = 'nomore'
}
const task = () => {
  uni.reLaunch({
    url: '/pages/index/index' // 重新加载应用程序并打开TabBar页面
  });
}

const goSearch = () => {
  uni.navigateTo({
    url: '/pages/search/index'
  })
}
</script>

<style scoped>
.downloadBanner {
  position: relative;
  z-index: 2;
  width: 750rpx;
  height: 104rpx;
  opacity: 1;
}

.downloadBannerImg {
  position: absolute;
  width: 100%;
  height: 100%;
}

.delete {
  position: absolute;
  z-index: 3;
  width: 30rpx;
  height: 30rpx;
  background-color: #fff;
}

.categoryItem {
  width: 750rpx;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.categoryItem .item {
  margin: 30rpx 0 80rpx 0;
  width: 20%;
  height: 100rpx;
}

.categoryItem .item .img {
  width: 120rpx;
  height: 120rpx;
}

.categoryItem .item .text {
  text-align: center;
}

.indexContainer .header {
  display: flex;
  padding: 10rpx 5rpx;
}

.indexContainer .header .logo {
  width: 140rpx;
  height: 40rpx;
  margin: 10rpx;
}

.indexContainer .header .search {
  width: 420rpx;
  height: 60rpx;
  background-color: #f5f5f5;
  position: relative;
}

.indexContainer .header .search input {
  width: 360rpx;
  height: 60rpx;
  margin-left: 60rpx;
}

.indexContainer .header .search input .placeholder {
  font-size: 26rpx;
}

.indexContainer .header .search .iconfont {
  position: absolute;
  font-size: 40rpx;
  left: 10rpx;
  top: 10rpx;
}

.indexContainer .header button {
  width: 144rpx;
  height: 60rpx;
  line-height: 60rpx;
  text-align: center;
  padding: 0 4rpx;
}

.indexContainer .navscroll {
  height: 80rpx;
  display: flex;
  white-space: nowrap;
}

.indexContainer .navscroll .navItem {
  display: inline-block;
  height: 40rpx;
  padding: 10rpx;
}

.indexContainer .navscroll .navItem.active {
  border-bottom: 4rpx solid #bb2c08;
}

.swiper image {
  width: 100%;
  height: 100%;
}

.list {
  white-space: nowrap;
  padding: 0rpx 16rpx;
  font-size: 28rpx;
  font-weight: bold;
}

.list .item {
  display: inline-block;
  width: 88rpx;
  padding: 16rpx 50rpx;
}

.baozhang {
  display: flex;
  justify-content: center;
}

.baozhang .cont {
  margin: 20rpx 10rpx;
}

.baozhang image {
  width: 32rpx;
  height: 32rpx;
}

.home_container {
  width: 100%;
}
.cheap {
  position: absolute;
  top: 20rpx;
  left: 20rpx;
}

.imgCard {
  position: absolute;
  width: 200rpx;
  height: 200rpx;
  top: 30rpx;
  left: 150rpx;
}

.togetherBuy {
  position: absolute;
  top: 20rpx;
  left: 20rpx;
}

.cheapImg {
  position: absolute;
  top: 40rpx;
  left: 150rpx;
  width: 200rpx;
  height: 200rpx;
}

.goodsRanking {
  font-size: 40rpx;
  width: 750rpx;
  height: 100rpx;
  line-height: 100rpx;
  margin-top: 50rpx;
  margin-left: 20rpx;
}

.hotItem {
  width: 750rpx;
  height: 750rpx;
  box-sizing: border-box;
}

.hotItem .hotItemTop {
  box-sizing: border-box;
  width: 750rpx;
  display: flex;
}

.hotItem .hotItemTop .hotItemTopLeft {
  display: flex;
  width: 50%;
  height: 200rpx;
  background: #f9f3e4;
}

.hotItem .hotItemTop .hotItemTopLeft .hotItemTopLeftText {
  margin: 30rpx 0 0 10rpx;
}

.hotItem .hotItemTop .hotItemTopLeft .hotItemTopimg {
  height: 100%;
  width: 50%;
}

.hotItem .hotItemTop .hotItemTopright {
  display: flex;
  margin-left: 10rpx;
  box-sizing: border-box;
  width: 50%;
  height: 200rpx;
  background: #ebeff6;
}

.hotItem .hotItemTop .hotItemTopright .hotItemTopLeftText {
  margin: 30rpx 0 0 10rpx;
}

.hotItem .hotItemTop .hotItemTopright .hotItemTopimg {
  height: 100%;
  width: 50%;
}

.hotItem .hotItemBottom {
  margin-top: 20rpx;
  display: flex;
  width: 750rpx;
  flex-wrap: wrap;
}

.hotItem .hotItemBottom .hotItemBottomItem {
  margin: 10rpx;
  box-sizing: border-box;
  width: 22%;
  background: #eee;
  height: 200rpx;
}

.hotItem .hotItemBottom .hotItemBottomItem .hotItemBottomTitle {
  font-size: 26rpx;
  margin-top: 10rpx;
  text-align: center;
}

.hotItem .hotItemBottom .hotItemBottomItem .hotItemBottomImg .moreImg {
  width: 130rpx;
  height: 130rpx;
}
</style>